<script setup lang="ts">
import { computed, defineOptions } from "vue";

defineOptions({
  name: "xt-icon",
});

interface PropType {
  size?: number | string;
  icon: string;
}

const props = withDefaults(defineProps<PropType>(), {
  size: "inherit",
});

const fontSize = computed(() => {
  if (typeof props.size === "number") return `${props.size}px`;
  return props.size;
});
</script>

<template>
  <i class="xt-icon iconfont" :class="icon" :style="{ fontSize: fontSize }" />
</template>

<style lang="scss" scoped></style>
